import React from 'react'
import { JumboTabs } from 'antd-mobile'
import { Link } from 'react-router-dom';
import {$pre} from '../../../../http/http'
import './Goods.less'
export default function
  (props) {
  let { indexGoodsList, n, changeN } = props;
  let cateName = ['菜单一', '菜单二', '菜单三', '菜单四'];
  console.log(indexGoodsList);
  return (
    <div className='goods'>
      <h3 className='title'>商品分类</h3>
      <JumboTabs defaultActiveKey='0' onChange={(k) => { changeN(k - 0) }}>
        {cateName.map((item, index) => {
          return (
            <JumboTabs.Tab description={item} key={index + ''}>
              <div className="goodList">
                {
                  (indexGoodsList.length > 0 && n === index) ? (
                    indexGoodsList[n].map(i => {
                      return (
                        <Link className='goodBox' to={`/detail/${i.id}/1`} key={i.id}>
                            <img src={$pre + i.img} alt="" />
                            <div className="info">
                              <h3>商品名称：{i.goodsname}</h3>
                              <div className="priceBox">
                                <p className=''>原价：<del>￥{i.market_price}</del></p>
                                <p className='now'>现价：￥{i.price}</p>
                              </div>
                            </div>
                        </Link>
                      )
                    })) : (<div>暂无数据</div>)
                }
              </div>
            </JumboTabs.Tab>
          )
        })}
      </JumboTabs>
    </div>
  )
}
